import React, { useEffect, useState } from "react";
import '../../appcommon.css';
import styles from './me.module.css';
import { useDispatch } from "react-redux";
import { DotLoading, Mask, Toast } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
import icon_wallet from '@/assets/icon_wallet.png'
import icon_my_earn from '@/assets/icon_my_earn.png'
import icon_invite from '@/assets/icon_invite.png'
import icon_setting from '@/assets/icon_setting.png'
import icon_link from '@/assets/icon_link.png'
import icon_about_us from '@/assets/icon_about_us.png'

import icon_back_white from '@/assets/icon_back_white.png'
import icon_right_black from '@/assets/icon_right_black.png'
import icon_nav_add_app from '@/assets/icon_nav_add_app.png'

import NavigateBar from "@/components/NavigateBar";
import BottomTabBar from "@/components/BottomTabBar/bottomTabBar";
import AddToHomeDialog from "@/components/AddToHomeDialog/AddToHomeGifDialog";
import { LangVnd } from '@/utils/langVnd';
import { isUnvalidUserInfo } from "@/utils/storage";

/**
 * 登录页
 */
export default function Me() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);

    // 当前币
    const [curMenuList, setCurMenuList] = useState([]);

    // 文案翻译
    const [curLang, setCurLang] = useState(LangVnd);

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //router
    const history = useHistory()

    //清空登录信息
    useEffect(() => {
        //关闭loading
        setMaskVisible(false);

        // 初始化菜单
        let menuList = [];
        let iconList = [
            icon_wallet,
            "",
            icon_my_earn,
            icon_invite,
            "",
            icon_setting,
            icon_link,
            icon_about_us];
        let titleList = [
            curLang.meManageMyWallet,
            "",
            curLang.meMyEarn,
            curLang.meInvite,
            "",
            curLang.meSetting,
            curLang.meTermsOfUse,
            curLang.meAboutUs];
        let actionList = [
            () => {
                console.log('点击 Manage my wallet');
                history.push('/mywalletlist');
            },
            () => {

            },
            () => {
                console.log('点击 My earn');
                history.replace('/earn');
            },
            () => {
                console.log('点击 Invite');
                history.push('/invite');
            },
            () => {
            },
            () => {
                console.log('点击 Setting');
                history.push('/mesetting');
            },
            () => {
                console.log('点击 Terms of use');
                history.push('/metermsofuse');
            },
            () => {
                console.log('点击 About us');
                history.push('/meaboutus');
            },
        ];

        let maxSize = Math.min(iconList.length, titleList.length);
        maxSize = Math.min(maxSize, actionList.length);
        for (let i = 0; i < maxSize; i++) {
            let icon = iconList[i];
            let title = titleList[i];
            let action = actionList[i];
            let isSpaceRow = false;

            if (title.length <= 0) {
                // 空行
                isSpaceRow = true;
            }

            menuList.push({
                icon: icon,
                title: title,
                action: action,
                isSpaceRow: isSpaceRow
            })
        }

        // 更新
        setCurMenuList(menuList);

        //打点
        doHitEvent("ME_START")

        // 判断是否需要重登录
        if (isUnvalidUserInfo()) {
            history.replace('/login')
            return
        }

        return () => {
            //打点
            doHitEvent("ME_END")
        }
    }, [])

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    return (
        <div className='pageRoot pageBackgroundColorGray'>
            <NavigateBar theme="white" showLogout={false} leftIcon={icon_back_white} rightIcon={icon_nav_add_app} onAddFavorite={() => { setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskVisible(true) }}>{curLang.meSetting}</NavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            <div className="pageContentColumnFull">
                {/* 菜单 列表 */}
                <div className="pageContentColumnFull">
                    <div className={styles.meMenuList}>
                        {curMenuList && curMenuList.map((value, index) => {
                            if (value.isSpaceRow) {
                                return (
                                    <div className={styles.meMenuListSpace} key={index}></div>
                                );
                            } else {
                                return (
                                    <div className={styles.meMenuListItem} key={index} onClick={value.action}>
                                        <img className={styles.meMenuListItemIcon} alt="" src={value.icon} />
                                        <div className={styles.meMenuListItemTitle}>{value.title}</div>
                                        <img className={styles.meMenuListItemExtIcon} alt="" src={icon_right_black} />
                                    </div>
                                )
                            }
                        })}
                    </div>
                </div>
            </div>

            {/* 底部 margin */}
            <div className="pageBottomEdge"></div>

            {/* tab bar */}
            <BottomTabBar page="me" />

            {/* 添加桌面快捷方式 */}
            <AddToHomeDialog visible={addHomeMaskVisible} onClose={() => { setAddHomeMaskVisible(false) }}></AddToHomeDialog>

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="pageLoadingOverlayContent">
                    <span style={{ fontSize: 24, color: '#3498DB' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}